<%var jstpl = {%>
    <script>
        var form = layui.form;
        var app = new Vue({
                el: "#gexin_body",
                data: {
                    query: {
                        title: "",
                        state: "",
                        type_id: "",
                        pageNumber: 1,
                        pageSize: 10
                    },
                    data_result: [],
                    type_data: {
                        id: '',
                        notice_type: 1,
                        type_name: '',
                        state: 0
                    },
                    modal_title: '添加通知类型'
                },
                created: function() {
                    this.loadPage("init")
                },
                methods: {
                    loadPage: function(model) { //载入模式有两种  init初始化载入 load分页载入
                        if (model == "init") {
                            this.query.pageNumber = 1;
                        }
                        Ajax("/system/notice/loadTypeData", this.query, function(d) {
                            if (!d.state) {
                                gx.alert(d.msg);
                                return false;
                            }
                            if (d.data.list == null || d.data.list.size <= 0 || d.data == null) {
                                app.query.pageNumber = 1;
                                app.data_result = [];
                                return false;
                            }
                            app.data_result = d.data.list;
                            if (d.data.firstPage == true) {
                                layui.laypage.render({
                                    elem: 'gexin_page' //注意，这里的 test1 是 ID，不用加 # 号
                                        ,
                                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                                    count: d.data.totalRow //数据总数，从服务端得到
                                        ,
                                    limit: app.query.pageSize,
                                    jump: function(obj, first) {
                                        app.query.pageNumber = obj.curr;
                                        if (app.query.pageSize != obj.limit) {
                                            app.query.pageSize = obj.limit;
                                            app.loadPage("init");
                                            return;
                                        }
                                        if (!first) {
                                            app.loadPage("load");
                                        }
                                    }
                                });
                            }
                        })
                    },
                    add: function() {
                        this.modal_title = '添加通知类型';
                        this.type_data.id = '';
                        this.type_data.notice_type = 1;
                        this.type_data.type_name = '';
                        this.type_data.state = 0;
                        $("#compose-mail input[name='t.notice_type'][value='1']").prop('checked', true);
                        $("#compose-mail input[name='t.state']").prop('checked', true);
                        form.render();
                        $('#compose-mail').modal('show')
                    },
                    edit: function(obj) {
                        this.modal_title = '修改通知类型';
                        this.type_data.id = obj.id;
                        this.type_data.notice_type = obj.notice_type;
                        this.type_data.type_name = obj.type_name;
                        this.type_data.state = obj.state;
                        $("#compose-mail input[name='t.notice_type'][value='" + obj.notice_type + "']").prop('checked', true);
                        if (obj.state == 0) {
                            $("#compose-mail input[name='t.state']").prop('checked', true);
                        } else {
                            $("#compose-mail input[name='t.state']").prop('checked', false);
                        }
                        form.render();
                        $('#compose-mail').modal('show')
                    },
                    save: function() {

                    },
                    del: function() {}
                }
            })
            //监听提交
        form.on('submit(formDemo)', function(data) {
            Ajax("/system/notice/saveType", data.field, function(ret) {
                if (ret.state) {
                    gx.alerts(ret.msg, function() {
                        app.loadPage("init");
                        $('#compose-mail').modal('hide');
                        layer.closeAll();
                    })
                } else {
                    gx.alert(ret.msg);
                }
            })
        });
    </script>
    <%};%>
        <%var csstpl = {%>
            <style type="text/css">
                [v-cloak] {
                    display: none
                }
            </style>
            <%};%>
                <%layout("../layout/_layout_layui.html",{title:'资讯管理',jstpl:jstpl,csstpl:csstpl}){ %>
                    <div class="layui-row" v-cloak>
                        <div class="layui-col-md12">
                            <div class="layui-col-md3">
                                <div class="layui-form-item ">
                                    <label class="layui-form-label">关键字</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="title" v-model="query.title" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-block">
                                        <select class="layui-input" v-model="query.state">
                        <option value="">请选择状态</option>
                        <option value="0">正常</option>
                        <option value="1">禁用</option>
                    </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md3">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">通知类型</label>
                                    <div class="layui-input-block">
                                        <select class="layui-input" v-model="query.type_id">
                        <option value="">请选择通知类型</option>
                        <option value="1">资讯</option>
                        <option value="2">公告</option>
                    </select>
                                    </div>
                                </div>
                            </div>


                            <div class="layui-col-md3">
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="button" @click="loadPage('init')" class="layui-btn ">查询</button>
                                        <button type="button" @click="add" class="layui-btn layui-btn-normal">添加类型</button>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="layui-col-md12" style="margin-top: 20px">
                            <table class="layui-table">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>类型</th>
                                        <th>名称</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody_body">
                                    <tr v-for="d  in  data_result">
                                        <td>{{d.id}}</td>
                                        <td>{{d.notice_type==1?'资讯':'公告'}}</td>
                                        <td>{{d.type_name}}</td>
                                        <td v-if="d.state==0"><span class="layui-badge layui-bg-blue">正常</span></td>
                                        <td v-else><span class="layui-badge layui-bg-red">禁用</span></td>
                                        <td>{{d.create_time}}</td>
                                        <td class="action-col">
                                            <div class="layui-btn-group">
                                                <a class="layui-btn layui-btn-primary layui-btn-sm" href="javascript:;" @click="edit(d)">编辑</a>
                                                <a class="layui-btn layui-btn-primary layui-btn-sm" :href="'javascript:gx.del(\'/system/notice/deleteType/'+d.id+'\')'">删除</a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr v-if="data_result.length==0">
                                        <td colspan="6" style="text-align:center;height:300px">
                                            <h1>没有数据</h1>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <fieldset id="gexin_page" class="layui-elem-field layui-field-title">
                            </fieldset>
                        </div>
                    </div>

                    <!-- 弹出框开始  -->
                    <div class="modal fade" id="compose-mail" tabindex="-1" role="dialog" aria-hidden="true">
                        <form id="add_saveform" class="layui-form form-horizontal ">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">
                                            {{modal_title}}
                                        </h4>
                                    </div>
                                    <!-- 弹出框内容  -->
                                    <div class="modal-body">
                                        <div class="layui-row layui-col-space15">

                                            <div class="layui-form-item">
                                                <label class="layui-form-label">名称</label>
                                                <div class="layui-input-block">
                                                    <input class="layui-input" type="text" lay-verType="tips" lay-verify="required" placeholder="请输入名称" name="t.type_name" v-model="type_data.type_name">
                                                </div>
                                            </div>

                                            <div class="layui-form-item">
                                                <label class="layui-form-label">类型</label>
                                                <div class="layui-input-block">
                                                    <input type="radio" name="t.notice_type" value="1" title="资讯" checked>
                                                    <input type="radio" name="t.notice_type" value="2" title="公告">
                                                </div>
                                            </div>

                                            <div class="layui-form-item">
                                                <label class="layui-form-label">状态</label>
                                                <div class="layui-input-block">
                                                    <input type="checkbox" value="0" name="t.state" lay-skin="switch" lay-text="正常|禁用">
                                                </div>
                                            </div>


                                            <input type="hidden" name="t.id" v-model="type_data.id" />

                                        </div>

                                    </div>

                                    <div class="modal-footer">
                                        <div class="layui-form-item">
                                            <div class="layui-input-block">
                                                <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                                                <button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                    <!--  弹出框结束 -->
                    <%};%>